<!DOCTYPE html>
<html lang="en-us" dir="ltr">
<head><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=54032&amp;path=livereload" data-no-instant defer></script>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="
  Details
  #

Details shortcode is a helper for details html5 element. It is going to replace expand shortcode.

  Example
  #

{{% details &#34;Title&#34; [open] %}}
## Markdown content
Lorem markdownum insigne...
{{% /details %}}
{{% details title=&#34;Title&#34; open=true %}}
## Markdown content
Lorem markdownum insigne...
{{% /details %}}


  Markdown content
  #

Lorem markdownum insigne&hellip;
">
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff">
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#343a40">
<meta name="color-scheme" content="light dark"><meta property="og:url" content="http://localhost:54032/docs/shortcodes/details/">
  <meta property="og:site_name" content="My New Hugo Site">
  <meta property="og:title" content="My New Hugo Site">
  <meta property="og:description" content="Details # Details shortcode is a helper for details html5 element. It is going to replace expand shortcode.
Example # {{% details &#34;Title&#34; [open] %}} ## Markdown content Lorem markdownum insigne... {{% /details %}} {{% details title=&#34;Title&#34; open=true %}} ## Markdown content Lorem markdownum insigne... {{% /details %}} Markdown content # Lorem markdownum insigne…">
  <meta property="og:locale" content="en_us">
  <meta property="og:type" content="article">
    <meta property="article:section" content="docs">
<title>Details | My New Hugo Site</title>
<link rel="icon" href="/favicon.png" >
<link rel="manifest" href="/manifest.json">
<link rel="canonical" href="http://localhost:54032/docs/shortcodes/details/">
<link rel="stylesheet" href="/book.min.a7616cf2799b58bddffce9438e31fdbfc6393687cfc0950a4a17cd1cce7e35f6.css" integrity="sha256-p2Fs8nmbWL3f/OlDjjH9v8Y5NofPwJUKShfNHM5&#43;NfY=" crossorigin="anonymous">
  <script defer src="/fuse.min.js"></script>
  <script defer src="/en.search.min.3b66ea01407e4b556d070fc3406a66155de140c5ac1f7d1addeb34c22a5f9f30.js" integrity="sha256-O2bqAUB&#43;S1VtBw/DQGpmFV3hQMWsH30a3es0wipfnzA=" crossorigin="anonymous"></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->
  
</head>
<body dir="ltr">
  <input type="checkbox" class="hidden toggle" id="menu-control" />
  <input type="checkbox" class="hidden toggle" id="toc-control" />
  <main class="container flex">
    <aside class="book-menu">
      <div class="book-menu-content">
        
  <nav>
<h2 class="book-brand">
  <a class="flex align-center" href="/"><span>My New Hugo Site</span>
  </a>
</h2>


<div class="book-search hidden">
  <input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>
<script>document.querySelector(".book-search").classList.remove("hidden")</script>















  
  <ul>
    
      
        <li class="book-section-flat" >
          
  
  

  
    <a href="/docs/example/" class="">Example Site</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/table-of-contents/" class="">Table of Contents</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/table-of-contents/with-toc/" class="">With ToC</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/example/table-of-contents/without-toc/" class="">Without ToC</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-4e600aa82e66db664aa5a8e4d34a9224" class="toggle"  />
    <label for="section-4e600aa82e66db664aa5a8e4d34a9224" class="flex justify-between">
      <a role="button" class="">Collapsed</a>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/collapsed/3rd-level/" class="">3rd Level</a>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/example/collapsed/3rd-level/4th-level/" class="">4th Level</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li class="book-section-flat" >
          
  
  

  
    <span>Shortcodes</span>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/buttons/" class="">Buttons</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/columns/" class="">Columns</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/details/" class="active">Details</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/hints/" class="">Hints</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/mermaid/" class="">Mermaid</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/my/" class="">My</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/tabs/" class="">Tabs</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="/docs/shortcodes/katex/" class="">KaTeX</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
  </ul>










  
<ul>
  
  <li>
    <a href="/posts/"  >
        Blog
      </a>
  </li>
  
</ul>






</nav>




  <script>(function(){var e=document.querySelector("aside .book-menu-content");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>


 
      </div>
    </aside>

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <h3>Details</h3>

  <label for="toc-control">
    
    <img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
    
  </label>
</div>


  
  <aside class="hidden clearfix">
    
  
<nav id="TableOfContents">
  <ul>
    <li><a href="#example">Example</a></li>
    <li><a href="#markdown-content">Markdown content</a></li>
  </ul>
</nav>



  </aside>
  
 
      </header>

      
      
  <article class="markdown book-article"><h1 id="details">
  Details
  <a class="anchor" href="#details">#</a>
</h1>
<p>Details shortcode is a helper for <code>details</code> html5 element. It is going to replace <code>expand</code> shortcode.</p>
<h2 id="example">
  Example
  <a class="anchor" href="#example">#</a>
</h2>
<div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-tpl" data-lang="tpl"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">details</span> <span style="color:#e6db74">&#34;Title&#34;</span> <span style="color:#f92672">[</span><span style="color:#a6e22e">open</span><span style="color:#f92672">]</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
</span></span><span style="display:flex;"><span>## Markdown content
</span></span><span style="display:flex;"><span>Lorem markdownum insigne...
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">details</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
</span></span></code></pre></div><div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-tpl" data-lang="tpl"><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#a6e22e">details</span> <span style="color:#a6e22e">title</span><span style="color:#f92672">=</span><span style="color:#e6db74">&#34;Title&#34;</span> <span style="color:#a6e22e">open</span><span style="color:#f92672">=</span><span style="color:#66d9ef">true</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
</span></span><span style="display:flex;"><span>## Markdown content
</span></span><span style="display:flex;"><span>Lorem markdownum insigne...
</span></span><span style="display:flex;"><span><span style="color:#75715e">{{</span><span style="color:#f92672">%</span> <span style="color:#f92672">/</span><span style="color:#a6e22e">details</span> <span style="color:#f92672">%</span><span style="color:#75715e">}}</span>
</span></span></code></pre></div><!-- raw HTML omitted -->
<h2 id="markdown-content">
  Markdown content
  <a class="anchor" href="#markdown-content">#</a>
</h2>
<p>Lorem markdownum insigne&hellip;</p>
<!-- raw HTML omitted -->
</article>
 
      

      <footer class="book-footer">
        
  <div class="flex flex-wrap justify-between">





</div>



  <script>(function(){function e(e){const t=window.getSelection(),n=document.createRange();n.selectNodeContents(e),t.removeAllRanges(),t.addRange(n)}document.querySelectorAll("pre code").forEach(t=>{t.addEventListener("click",function(){if(window.getSelection().toString())return;e(t.parentElement),navigator.clipboard&&navigator.clipboard.writeText(t.parentElement.textContent)})})})()</script>


 
        
      </footer>

      
  
  <div class="book-comments">

</div>
  
 

      <label for="menu-control" class="hidden book-menu-overlay"></label>
    </div>

    
    <aside class="book-toc">
      <div class="book-toc-content">
        
  
<nav id="TableOfContents">
  <ul>
    <li><a href="#example">Example</a></li>
    <li><a href="#markdown-content">Markdown content</a></li>
  </ul>
</nav>


 
      </div>
    </aside>
    
  </main>

  
</body>
</html>












